<template>
  <div class="app-container">
    <div style="margin-bottom: 20px">
      <HeaderTool  @selectDate="selectDate"  @exportExcel="exportExcel"></HeaderTool>
      <div class="grid-container">
        <el-card v-for="(card, index) in cardList" :key="index"  class="grid-item padding-top-bottom-16 padding-left-right-6" style="height: 130px;">
          <div class="flex justify-content-space-between">
            <div class="title">{{ card.title }}</div>
            <img alt="" class="icon" :src="card.icon">
          </div>
          <div class="flex align-end" >
            <div class="count">{{ card.count }}</div>
            <div :class="card.status" class="analyze">{{ card.analyze }}</div>
          </div>
        </el-card>
      </div>
      <!--  两列图表 -->
      <el-row :gutter="20">
        <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
          <EchartsComponent  style="margin-right: 10px" :options="chartOptions[0]" class="charts-common flex-auto"></EchartsComponent>
        </el-col>
        <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
          <EchartsComponent  style="margin-left: 10px"  :options="chartOptions[1]" class="charts-common flex-auto"></EchartsComponent>
        </el-col>
      </el-row>

      <div style="margin-top: 20px;position: relative;" class="data-table-container">
        <el-card class="padding-10" style="padding-bottom: 40px">
        <el-row :gutter="20">
            <el-col :xs="24" :sm="12" >
              <div class="sub-title">单病种质量控制</div>
            </el-col>
            <el-col :xs="24" :sm="12">
              <div class="flex align-center justify-content-end">
                <el-date-picker v-model="singleDisease.date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择时间"  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" type="daterange"></el-date-picker>
                <div style="margin: 0 10px">
                  <el-select v-model="singleDisease.diseaseCode" clearable placeholder="请选择病种">
                    <el-option
                        v-for="item in diseaseTypeList"
                        :key="item.diseaseCode"
                        :label="item.diseaseName"
                        :value="item.diseaseCode">
                    </el-option>
                  </el-select>

                </div>
                <el-button type="primary" icon="search" style="margin: 0 10px" @click="getSingleDiseaseList">搜索</el-button>
              </div>
            </el-col>
          </el-row>
        <el-table :data="singleDiseaseList"  style="width: 100%;margin-top: 20px;">
        <el-table-column prop="diseaseName" label="病种" />
        <el-table-column align="center" prop="diseaseCount" label="总例数" />
        <el-table-column align="center" prop="diseaseChargeRatio" label="平均住院日" />

          <el-table-column align="center" prop="diseaseFeeRatio" label="场均费用">
            <template #default="scope">
              <span>￥ {{scope.row.diseaseFeeRatio}} </span>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="diseaseDeathRatio" label="病死率">
            <template #default="scope">
              <span>{{scope.row.diseaseDeathRatio}} %</span>
            </template>
          </el-table-column>

      </el-table>
        <pagination
                    v-if="singleDisease.totalCount > 10"
                    :total="singleDisease.totalCount"
                    v-model:page="singleDisease.pageNumber"
                    v-model:limit="singleDisease.pageSize"
                    @pagination="getSingleDiseaseListPage" />
      </el-card>
      </div>

      <div style="margin-top: 20px;position: relative" class="data-table-container">
        <el-card class="padding-10" style="padding-bottom: 40px">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" >
              <div class="sub-title">肿瘤专业医疗质量控制指标</div>
            </el-col>
            <el-col :xs="24" :sm="12">
              <div class="flex align-center justify-content-end">
                <el-date-picker v-model="cancerIndicator.date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择时间"  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" type="daterange"></el-date-picker>
                <div style="margin: 0 10px">

                  <el-select v-model="cancerIndicator.cancerCode" clearable placeholder="请选择癌种" >
                    <el-option
                        v-for="item in cancerTypeList"
                        :key="item.cancerCode"
                        :label="item.cancerName"
                        :value="item.cancerCode">
                    </el-option>
                  </el-select>
                </div>
                <el-button type="primary" icon="search" style="margin: 0 10px"  @click="getCancerIndicatorList">搜索</el-button>
              </div>
            </el-col>
          </el-row>
      <el-table :data="cancerIndicatorList"  style="width: 100%;margin-top: 10px">
        <el-table-column align="center"  width="100px" prop="cancerName" label="病种" />

        <el-table-column align="center" prop="cancerFSTRatio" label="首次治疗前临床分期评估率">
          <template #default="scope"><span>{{scope.row.cancerFSTRatio}} %</span></template>
        </el-table-column>

        <el-table-column align="center" prop="cancerSurgeryRatio" label="首次非手术治疗前病理学诊断率">
          <template #default="scope"><span>{{scope.row.cancerSurgeryRatio}} %</span></template>
        </el-table-column>

        <el-table-column align="center" prop="cancerTNMRatio" label="术后病理TNM分期率">
          <template #default="scope"><span>{{scope.row.cancerTNMRatio}} %</span></template>
        </el-table-column>

        <el-table-column align="center" prop="cancerDeathRatio" label="围手术期死亡率">
          <template #default="scope"><span>{{scope.row.cancerDeathRatio}} %</span></template>
        </el-table-column>

        <el-table-column align="center" prop="cancerTargetedRatio" label="首次靶向/免疫治疗前分子病理检测率">
          <template #default="scope"><span>{{scope.row.cancerTargetedRatio}} %</span></template>
        </el-table-column>

        <el-table-column align="center" prop="cancerLymphRatio" label="术中淋巴结清扫规范率">
          <template #default="scope"><span>{{scope.row.cancerLymphRatio}} %</span></template>
        </el-table-column>

      </el-table>
      <pagination
                   v-if="cancerIndicator.totalCount > 10"
                   :total="cancerIndicator.totalCount"
                   v-model:page="cancerIndicator.pageNumber"
                   v-model:limit="cancerIndicator.pageSize"
                   @pagination="getCancerListPage" />

    </el-card>
      </div>
    </div>
    <CustomDialog v-model:analyzeDialogVisible="analyzeDialogVisible"></CustomDialog>
  </div>
</template>
<script setup>
import {ref} from 'vue';
import EchartsComponent from "@/components/ECharts/index.vue";
import HeaderTool from "@/components/HeaderTool/index.vue";
import {getCancerInfo, getCancerTypeInfo, getDeviceInfoRatio, getDeviceInspection, getDiseaseInfo, getDiseaseTypeInfo, getPersonInfoRatio} from "@/api/quality/secure.js";
import DateUtils from "@/utils/utils.js";
const cardList = ref([
  {
    title: '手术患者并发症发生率',
    count: '2.8%',
    icon:new URL('@/assets/static/手术并发症.png', import.meta.url).href,
    analyze: '2.8 %',
    status: 'increase'
  }, {
    title: '非计划重返住院率',
    count: '2.8%',
    icon:new URL('@/assets/static/重返住院率.png', import.meta.url).href,
    analyze: '2.8 %',
    status: 'decrease'
  }, {
    title: 'I类切口手术部位感染率',
    count: '2.8%',
    icon:new URL('@/assets/static/手术感染率.png', import.meta.url).href,
    analyze: '2.8 %',
    status: 'increase'
  },
  {
    title: '低风险组病例死亡率',
    count: '2.8%',
    icon:new URL('@/assets/static/病例死亡率.png', import.meta.url).href,
    analyze: '2.8 %',
    status: 'decrease'
  },
  {
    title: '优质护理服务病房覆盖率',
    count: '2.8%',
    icon:new URL('@/assets/static/病例死亡率.png', import.meta.url).href,
    analyze: '2.8 %',
    status: 'decrease'
  }
]);
const chartOptions = ref([
  {
    title: {
      text: '大型医用设备检查阳性率',
      left: 'left'
    },
    tooltip: {
      trigger: 'item', // 触发类型：坐标轴触发
      axisPointer: {
        type: 'shadow' // 指示器类型：阴影
      }
    },
    xAxis: {
      type: 'category',
      data: ['2CT', '23MRI', '3DSA', '2DR', '1ECT'],
      axisLabel: {
        interval: 0
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}%'
      }
    },
    series: [
      {
        name: '阳性率',
        type: 'bar',
        itemStyle: {
          color: '#5470c6'
        },
        data: [70, 75, 85, 60, 80]
      }
    ]
  },
  {
    title: {
      text: '大型医用设备登记和维修保养记录',
      left: 'left'
    },
    tooltip: {
      trigger: 'item', // 触发类型：坐标轴触发
      axisPointer: {
        type: 'shadow' // 指示器类型：阴影
      }
    },
    legend: {
      data: ['维修次数', '保养次数'],
      left: 'right',
      orient: 'vertical' // 设置图例垂直排列
    },
    xAxis: {
      type: 'category',
      data: ['CT', 'MRI', 'DSA', 'DR', 'ECT', 'X光机', '超声'],
      axisLabel: {
        interval: 0,
        rotate: 0
      }
    },
    yAxis: {
      type: 'value',
      interval: 10,
      axisLabel: {
        formatter: '{value}'
      }
    },
    series: [
      {
        name: '维修次数',
        type: 'bar',
        itemStyle: {
          color: '#5470c6'
        },
        data: [5, 2, 3, 8, 1, 10, 15]
      },
      {
        name: '保养次数',
        type: 'bar',
        itemStyle: {
          color: '#91cc75'
        },
        data: [12, 5, 7, 20, 3, 30, 48]
      }
    ]
  },
  {
    title: {text: '日间手术占择期手术比例'},
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'Direct',
        type: 'bar',
        barWidth: '60%',
        data: [10, 52, 200, 334, 390, 330, 220]
      }
    ]
  },
  {
    title: {
      text: '单病种质量控制',
      left: 'left'
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
]);
const analyzeDialogVisible = ref(false);
const diseaseTypeList = ref([])
const cancerTypeList = ref([])

// 选择历史时间
const selectDate = (time) => {
  personRatio({starTime: time[0], endTime: time[1]}) // 四个小卡片
  deviceRatio({starTime: time[0], endTime: time[1]}) //大型医用设备检查阳性率
  deviceInspection({starTime: time[0], endTime: time[1]})  //大型医用设备等级和维修保养记录
};
// 导出excel文件
const exportExcel = () => {
  console.log("导出excel文件")
  analyzeDialogVisible.value = true;
};

// 单病种列表
const singleDiseaseList = ref([]);

// 肿瘤专业医疗质量控制指标列表
const cancerIndicatorList = ref([]);

// 单病种参数
const singleDisease = ref(
  {
    date: [
      DateUtils.formatDate(DateUtils.getDateByDays(-30),"yyyy-MM-dd"),
      DateUtils.formatDate(DateUtils.now(),"yyyy-MM-dd")
    ],
    diseaseCode: '', // 病种
    pageNumber: 1, // 当前页
    pageSize: 10, // 一页的数据量
    totalCount:0
});

// 肿瘤专业医疗质量控制指标
const cancerIndicator = ref(
    {
      date: [
          DateUtils.formatDate(DateUtils.getDateByDays(-30),"yyyy-MM-dd"),
          DateUtils.formatDate(DateUtils.now(),"yyyy-MM-dd")
      ],
      cancerCode: '', // 病种
      pageNumber: 1, // 当前页
      pageSize: 10,// 一页的数据量
      totalCount:0
    });

// 获取单病种列表
const getSingleDiseaseList = () => {
  singleDisease.value.pageNumber = 1;
  getDiseaseInfoList(singleDisease);
};

// 获取肿瘤专业医疗质量控制指标列表
const getCancerIndicatorList = () => {
  cancerIndicator.value.pageNumber = 1;
  getCancerInfoList(cancerIndicator);
};

// 获取肿瘤专业医疗质量控制指标
const getSingleDiseaseListPage = () => {
  getDiseaseInfoList(singleDisease);
};
// 获取单病种列表
const getCancerListPage = () => {
  getCancerInfoList(cancerIndicator);
};


const personRatio = async (params) => {
  let result = await getPersonInfoRatio(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
     cardList.value[0].count = data.surgicalRatio + "%";
     cardList.value[0].analyze = data.today_SurgicalRatio + "%";
     cardList.value[1].count = data.rtnHospRatio + "%";
     cardList.value[1].analyze = data.today_RTNHospRatio + "%";
     cardList.value[2].count = data.iSurgicalRatio + "%";
     cardList.value[2].analyze = data.today_ISurgicalRatio + "%";
     cardList.value[3].count = data.lowDeathRatio + "%";
     cardList.value[3].analyze = data.today_LowDeathRatio + "%";
     cardList.value[4].count = data.serviceRatio + "%";
     cardList.value[4].analyze = data.today_ServiceRatio + "%";
  }
}
const deviceRatio = async (params) => {
  let result = await getDeviceInfoRatio(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    const processedKeys = Object.keys(data).map(key => key.replace('Ratio', '').toUpperCase());
    let xAxis = [];
    let seriesData= [];
    processedKeys.forEach(item=>{
      xAxis.push(item)
      seriesData.push(data[item.toLowerCase() + 'Ratio'])
    })
    chartOptions.value[0].xAxis.data = xAxis
    chartOptions.value[0].series[0].data = seriesData
  }
}
const deviceInspection = async (params) => {
  let result = await getDeviceInspection(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    let xAxis = [];
    let series0 = [];
    let series1 = [];
    data.forEach(item=>{
      xAxis.push(item.deviceTypeName)
      series0.push(item.deviceMROCount)
      series1.push(item.devicePMCount)
    })
    chartOptions.value[1].xAxis.data = xAxis;
    chartOptions.value[1].series[0].data = series0;
    chartOptions.value[1].series[1].data = series1;
  }
}
//获取病种类型列表信息
const getDiseaseTypeList = async () => {
  let result = await getDiseaseTypeInfo();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    diseaseTypeList.value = data;
  }
}
//获取癌症类型信息
const getCancerTypeList = async () => {
  let result = await getCancerTypeInfo();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    cancerTypeList.value = data;
  }
}

//获取单病种列表信息
const getDiseaseInfoList = async (params) => {
  const starTime = params.value.date[0];
  const endTime = params.value.date[1];
  const diseaseCode = params.value.diseaseCode;
  const pageNumber = params.value.pageNumber;
  const pageSize = params.value.pageSize;
  let result = await getDiseaseInfo({starTime,endTime,diseaseCode,pageNumber,pageSize});
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    const { items,pageNumber,pageSize,totalCount, totalPages} = data;
     singleDiseaseList.value = items;
     singleDisease.value.pageNumber = pageNumber;
     singleDisease.value.totalCount = totalCount;
  }
}
//获取癌症列表信息
const getCancerInfoList = async (params) => {
  const starTime = params.value.date[0];
  const endTime = params.value.date[1];
  const cancerCode = params.value.cancerCode;
  const pageNumber = params.value.pageNumber;
  const pageSize = params.value.pageSize;
  let result = await getCancerInfo({starTime,endTime,cancerCode,pageNumber,pageSize});
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
      const { items,pageNumber,pageSize,totalCount, totalPages} = data;
      cancerIndicatorList.value = items;
     cancerIndicator.value.pageNumber = pageNumber;
     cancerIndicator.value.totalCount = totalCount;
  }
}

// 加载界面所有数据
const getAllData = (params)=>{
  personRatio(params) // 四个小卡片
  deviceRatio(params) //大型医用设备检查阳性率
  deviceInspection(params)  //大型医用设备等级和维修保养记录
  // 下拉列表
  getDiseaseTypeList();
  getCancerTypeList();
  // 表格数据
  getDiseaseInfoList(singleDisease);
  getCancerInfoList(cancerIndicator);
}

getAllData({
  starTime: DateUtils.formatDate(DateUtils.getDateByDays(-30),"yyyy-MM-dd"),
  endTime: DateUtils.formatDate(DateUtils.now(),"yyyy-MM-dd"),
});
</script>
<style lang='scss' scoped>
.app-container {
  height: calc(100vh - 84px);
  overflow-y: scroll;
  /* 针对 WebKit 内核浏览器（如 Chrome、Safari） */
  scrollbar-width: none;
  -ms-overflow-style: none;
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }

  .el-card {
    border-radius: 13px;
    border: none;
  }
  .title {
    font-size: 16px;
    color: #858E98;
  }
  .icon {
    height: 20px;
  }
  .count {
    color: #464646;
    font-size: 30px;
    font-weight: 600;
    padding-top: 25px;
    position: relative;
    top: 8px;
  }
  .analyze {
    font-size: 16px;
    padding-left: 15px;
    position: relative;
    top: 3px;
  }
  .increase {
    color: #00C94F;
  }
  .decrease {
    color: #FF3643;
  }
  .fair {
    color: #8F95A1;
  }
  .charts-common {
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    height: 300px;
  }
  .data-table-container {
     .sub-title{
        color: #464646;
        font-size: 20px;
        margin: 10px 0;
        font-weight: bolder;
     }
  }

}
.el-select{
   width: 180px;
}
</style>
